<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">讯助后台管理系统</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="id">
                    <el-input v-model="param.id" placeholder="请输入用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        placeholder="请输入密码"
                        v-model="param.password"
                        @keyup.enter.native="submitForm()"
                    >
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
            </el-form>
        </div>
            <div id="snail">
            <div id="shell"></div>
            <div id="slug"></div>
        </div>
        <div id="slime"></div>
    </div>

</template>

<script>
import axios from '../../axios/index';
export default {
    data: function() {
        return {
            param: {
                id: '',
                password: '',
            },
            rules: {
                id: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
        };
    },
    methods: {
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid) {
                    axios.post('/manager/login', this.param)
                        .then(response => {
                            console.log(response.code)
                            if(response.code != 200) {
                                this.$message.error(response.data.message);
                                return
                            }

                            localStorage.setItem('ms_username', this.param.id);
                            localStorage.setItem('ms_password', this.param.password);
                            this.$message.success('登录成功');
                            this.$router.push('/');
                        })
                        .catch(error => {    
                            if (error.response) {
                                this.$message.error(error.response.data.message);
                            } else {
                                this.$message.error('登录失败，请检查您的帐号密码');
                            }
                        });
                } else {
                    this.$message.error('请输入账号和密码');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        mounted() {
            const id = localStorage.getItem('ms_username');
            const password = localStorage.getItem('ms_password');
            if (id && password) {
            this.param.id = id;
            this.param.password = password;
            }
        },
    },
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(58, 141, 255, 0.8) 0%, rgba(134, 185, 255, 0.8) 50%, rgba(158, 135, 255, 0.8) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.ms-login {
    width: 400px;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.9); /* 增加透明度 */
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 陰影效果 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    animation: fadeIn 1s ease-in-out; /* 動畫效果 */
}

.ms-title {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}

.ms-content {
    padding: 0;
}

.el-input__inner {
    border-radius: 20px;
    padding: 10px 20px;
}

.el-button {
    border-radius: 20px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 40px;
    background-color: #4b79a1;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.login-btn button:hover {
    background-color: #283e51;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* snail */
body {
  overflow:hidden;
}


#snail {
  height:75px;
  width:120px;
  position:absolute;
  z-index:1;
  top:100px;
  left:-120px;
  animation:25s snailCrawl linear infinite;
  #shell {
    height:64px;
    width:74px;
    border-radius:100%;
    background: rgb(140,79,19); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(140,79,19,1) 44%, rgba(140,79,19,1) 51%, rgba(95,48,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(44%,rgba(140,79,19,1)), color-stop(51%,rgba(140,79,19,1)), color-stop(100%,rgba(95,48,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(140,79,19,1) 44%,rgba(140,79,19,1) 51%,rgba(95,48,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(140,79,19,1) 44%,rgba(140,79,19,1) 51%,rgba(95,48,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(140,79,19,1) 44%,rgba(140,79,19,1) 51%,rgba(95,48,1,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(140,79,19,1) 44%,rgba(140,79,19,1) 51%,rgba(95,48,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c4f13', endColorstr='#5f3001',GradientType=1 ); /* IE6-9 */

    position:absolute;
    z-index:1;
    top:5px;
    left:20px;
    overflow:visible;
    transform:rotate(20deg);
    &:after {
      content:'';
      display:block;
      position:absolute;
      right:49px;
      width:0;
      height:0;
      border-right:54px solid #8c4f13;
      border-top:32px solid transparent;
      border-bottom:32px solid transparent;
      border-radius:64px;
    }
  }
  #slug {
    width:170px;
    height:30px;
    position:absolute;
    bottom:0;
    right:0;
    background:green;
    border-radius:0 15px 5px 0;
    animation: 1.25s slugSquish ease-in-out infinite;
    &:before { /* creates antennae */
      content:'.';
      font-size:50px;
      line-height:0px;
      color:transparent;
      text-shadow: -7px -12px 0 rgb(183,223,45), -1px -7px 0 rgb(183,223,45);
      display:block;
      position:absolute;
      height:30px;
      width:2px;
      background:green;
      right:10px;
      top:-25px;
      transform:rotate(30deg);
      box-shadow:6px 5px 0 green;
    }
    &:after { /* creates tail */
      content:'';
      display:block;
      position:absolute;
      bottom:0px;
      left:-100px;
      height:0;
      width:0;
      border-left:100px solid transparent;
      border-bottom:40px solid green;
    }
  }
}

#slime {
  height:5px;
  width:50%;
  background: -moz-linear-gradient(left,  rgba(183,223,45,0) 0%, rgba(183,223,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(183,223,45,0)), color-stop(100%,rgba(183,223,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(183,223,45,0) 0%,rgba(183,223,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(183,223,45,0) 0%,rgba(183,223,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(183,223,45,0) 0%,rgba(183,223,45,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(183,223,45,0) 0%,rgba(183,223,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7df2d', endColorstr='#b7df2d',GradientType=1 ); /* IE6-9 */
  position:absolute;
  z-index:0;
  top:172px;
  left:-50%;
  animation: 25s slimeSpread linear infinite;
  border-radius:3px;
}

@keyframes snailCrawl {
  0% {
    left:-120px;
  }
  100% {
    left:calc(100% + 120px);
  }
}

@keyframes slimeSpread {
  0% {
    left:-50%;
    opacity:.5;
  }
  95% {
    opacity:.5;
  }
  100% {
    left:calc(50% + 240px);
    opacity:0;
  }
}

@keyframes slugSquish {
  0% {
    width:50px;
    right:-5px;
  }
  50% {
    width:40px;
    right:0px;
  }
  100% {
    width:50px;
    right:-5px;
  }
}
#snail {
  height: 75px;
  width: 120px;
  position: absolute;
  z-index: 1;
  top: 700px; /* 調整為 700px */
  left: -120px;
  animation: 25s snailCrawl linear infinite;
  /* 其他樣式保持不變 */
}

#slime {
  height: 5px;
  width: 50%;
  position: absolute;
  z-index: 0;
  top: 777px; /* 黏液的位置需要比蝸牛略微向下 */
  left: -50%;
  animation: 25s slimeSpread linear infinite;
  border-radius: 3px;
  /* 其他樣式保持不變 */
}

</style>